<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>


    <link rel="stylesheet" href="./static/bootstrap.min.css">
    <link rel="stylesheet" href="./static/method_rule.css">
    <script src="./static/jquery-1.7.2.js"></script>
    <script src="./static/bootstrap.js"></script>
    <script src="./static/vue.js"></script>
    <script src="./static/axios.min.js"></script>
    <script src="./static/agent.base.js"></script>
    <script>
        let v;
        window.onload = function () {
            v = new Vue({
                el: '#box',
                data: {
                    serverData: [],
                },
                methods: {
                    to_method_rule_page: function (id) {
                        window.location.href = "method_rule.html?id=" + id
                    },
                    load_agent: function (id) {
                        request_uri.load_agent.request({id}, base_callback);
                    },
                    add: function(){
                        add();
                    }
                }
            });

            loadData()
        };

        function loadData() {
            request_uri.method_point_list.request({}, pushData)
        }

        function pushData(result) {
            v.serverData = result.data.content
        }

        function add(){
            let serverName = $("#server").val();
            let serverIp = $("#ip").val();
            let serverPort = $("#port").val();
            let serverPath = $("#path").val();
            let packageName = $("#package").val();
            let className = $("#class").val();
            let methodName = $("#method").val();
            let methodArgsType = $("#methodArgsType").val();
            let methodDesc = $("#desc").val();

            let req = {serverName, serverIp, serverPort, serverPath, packageName, className, methodName, methodArgsType, methodDesc};
            request_uri.add_server.request(req, base_callback)
            location.reload()
        }
    </script>
</head>
<body>

<div class="container" id="box">
    <input type="button" value="add method point" class="btn btn-default" data-toggle="modal" data-target="#layer"  >

    <hr>
    <table class="table table-bordered table-hover">
        <caption class="h1 text-info">METHOD POINT</caption>
        <tr class="text-danger">
            <th class="text-center">server</th>
            <th class="text-center">url</th>
            <th class="text-center">class</th>
            <th class="text-center">method</th>
            <th class="text-center">desc</th>
            <th class="text-center">operation</th>
        </tr>
        <tr class="text-center" v-for="item in serverData">
            <td class="text-td"  style="width:150px;">{{item.serverName}}</td>
            <td>http://{{item.serverIp}}:{{item.serverPort}}/{{item.serverPath}}</td>
            <td class="text-td"  style="width:240px;">{{item.packageName}}.{{item.className}}</td>
            <td class="text-td" style="width:400px;">{{item.methodName}}({{item.methodArgsType}})</td>
            <td>{{item.methodDesc}}</td>
            <td>
                <button class="btn btn-link btn-sm" data-toggle="modal"
                        v-on:click="to_method_rule_page(item.id)">method rule
                </button>

                <button class="btn btn-warning btn-sm" v-on:click="load_agent(item.id)">load agent</button>
            </td>
        </tr>

        <tr v-show="serverData.length==0">
            <td colspan="6" class="text-center text-muted">
                <p>none....</p>
            </td>
        </tr>
    </table>

    <!-- &lt;!&ndash;模态框 弹出框&ndash;&gt;-->
     <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal">
                             <span>&times;</span>
                         </button>
                         <h4 class="modal-title">add method point</h4>
                     </div>
                     <div class="modal-body text-right">
                         <form role="form" class="form">
                             <div class="form-group">
                                 <label for="server" class="label-name">server</label>
                                 <input type="text" id="server" class="form-control" placeholder="server name" >

                             </div>
                             <div class="form-group  col-md-offset-1">
                                 <label for="ip" class="label-name">ip</label>
                                 <input type="text" id="ip" class="form-control" placeholder="ip" >

                             </div>
                         </form>
                         <form role="form" class="form">
                             <div class="form-group">
                                 <label for="port" class="label-name">port</label>
                                 <input type="text" id="port" class="form-control" placeholder="port" >
                             </div>
                             <div class="form-group  col-md-offset-1">
                                 <label for="path" class="label-name">path</label>
                                 <input type="text" id="path" class="form-control" placeholder="path">
                             </div>
                         </form>

                         <form role="form" class="form">
                             <div class="form-group">
                                 <label for="package" class="label-name">package</label>
                                 <input type="text" id="package" class="form-control" placeholder="package" >
                             </div>
                             <div class="form-group  col-md-offset-1">
                                 <label for="class" class="label-name">class</label>
                                 <input type="text" id="class" class="form-control" placeholder="class">
                             </div>
                         </form>


                         <form role="form" class="form">

                             <div class="form-group">
                                 <label for="method" class="label-name">method</label>
                                 <input type="text" id="method" class="form-control" placeholder="method" >
                             </div>
                             <div class="form-group  col-md-offset-1">
                                 <label for="desc" class="label-name">desc</label>
                                 <input type="text" id="desc" class="form-control" placeholder="desc" >
                             </div>
                         </form>


                         <form role="form" class="form">
                             <div class="form-group-area">
                                 <label for="methodArgsType" class="label-name-area">args type</label>
                                 <textarea id="methodArgsType" class="form-control" placeholder="method args type"></textarea>
                             </div>
                         </form>
                         <form role="form" class="form-btn">
                             <div>
                                 <input type="button" value="save" class="btn btn-primary" v-on:click="add()">
                             </div>
                         </form>
                     </div>
                 </div>
             </div>
         </div>
</div>
</body>
</html>